<template>
  <el-button type="primary" @click="addClue" v-hasPermission="'clue:add'"
    >录入线索</el-button
  >
  <el-button type="success" @click="importExcel" v-hasPermission="'clue:import'"
    >导入线索(Excel)</el-button
  >
  <el-button type="danger" @click="batchDel" v-hasPermission="'clue:delete'"
    >批量删除</el-button
  >
  <el-table
    :data="clueList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="50" />
    <el-table-column type="index" label="序号" width="65" />
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动" />
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{
          scope.row.fullName
        }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼" />
    <el-table-column property="phone" label="手机" width="120" />
    <el-table-column property="weixin" label="微信" width="120" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="intentionStateDO.typeValue" label="意向状态" />
    <el-table-column property="intentionProductDO.name" label="意向产品" />
    <el-table-column label="线索状态">
      <template #default="scope">
        <span
          style="background: lightgoldenrodyellow"
          v-if="scope.row.state === -1"
        >
          {{ scope.row.stateDO.typeValue }}
        </span>
        <span v-else> {{ scope.row.stateDO.typeValue }} </span>
      </template>
    </el-table-column>
    <el-table-column property="sourceDO.typeValue" label="线索来源" />
    <el-table-column
      property="nextContactTime"
      label="下次联系时间"
      width="165"
    />
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button
          type="primary"
          @click="view(scope.row.id)"
          v-hasPermission="'clue:view'"
          >详情</el-button
        >
        <el-button
          type="success"
          @click="edit(scope.row.id)"
          v-hasPermission="'clue:edit'"
          >编辑</el-button
        >
        <el-button
          type="danger"
          @click="del(scope.row.id)"
          v-hasPermission="'clue:delete'"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <p>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
    />
  </p>
  <!-- 编辑弹框 -->
  <el-dialog
    v-model="importExcelDialogVisible"
    width="55%"
    center
    draggable
    title="导入线索Excel"
  >
    <el-form label-width="110px">
      <el-form-item label="">
        <el-upload
          ref="uploadRef"
          :auto-upload="false"
          :http-request="uploadFile"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          仅支持后缀名为.xls或xlsx的文件

          <template #tip>
            <div class="fileTip">
              重要提示：
              <ul>
                <li>上传仅支持后缀名为.xls或.xlsx的文件;</li>
                <li>给定Excel文件的第一行视为字段名;</li>
                <li>请确认您的文件大小不超过50MB</li>
                <li>日期值以文本形式保存,必须符合yyyy-MM-dd格式;</li>
                <li>日期时间以文本形式保存,必须符合yyyy-MM-DD HH:mm:ss格式;</li>
              </ul>
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="importExcelDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submitUpload"> 导入 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { doGet, doPost, doDelete } from "@/http/httpRequest";
import { messageTip, messageConfirm } from "@/util/util";
import router from "@/router/router";
export default {
  props: ["reload"],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const clueList = ref([
      {
        ownerDO: {},
        activityDO: {},
        appellationDO: {},
        needLoanDO: {},
        intentionStateDo: {},
        intentionProductionDO: {},
        stateDO: {},
        sourceDO: {},
      },
    ]);
    let pageSize = ref(0);
    let total = ref(0);
    let importExcelDialogVisible = ref(false);
    let cluedIdArray = ref([]);
    function handleSelectionChange(selectionDataArray) {
      cluedIdArray.value = [];
      selectionDataArray.forEach((data) => {
        cluedIdArray.value.push(data.id);
      });
    }
    onMounted(() => {
      getData();
    });
    function getData(current) {
      doGet("/api/clues", {
        current: current,
      }).then((resp) => {
        if (resp.data.code === 200) {
          Object.assign(clueList.value, resp.data.data.list);
          clueList.value.length = resp.data.data.list.length;
          pageSize.value = resp.data.data.pageSize;
          total.value = resp.data.data.total;
        }
      });
    }
    //current是element组件传过来的
    function toPage(current) {
      getData(current);
    }

    function importExcel() {
      //弹窗
      importExcelDialogVisible.value = true;
    }
    //框架会自动注入这个文件参数
    function uploadFile(param) {
      let fileObject = param.file;
      let formData = new FormData();
      formData.append("file", fileObject);
      doPost("/api/importExcel", formData).then((resp) => {
        if (resp.data.code === 200) {
          messageTip("导入成功", "success");
          proxy.$refs.uploadRef.clearFiles();
          props.reload;
        } else {
          messageTip("导入失败", "error");
        }
      });
    }
    function submitUpload() {
      proxy.$refs.uploadRef.submit();
    }
    function addClue() {
      router.push("/dashboard/clue/add");
    }
    function edit(id) {
      router.push("/dashboard/clue/edit/" + id);
    }
    function view(id) {
      router.push("/dashboard/clue/detail/" + id);
    }
    function del(id) {
      messageConfirm("你确定要删除?")
        .then(() => {
          doDelete("/api/clue/" + id, {}).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              props.reload();
            } else {
              console.log(resp.data);
              messageTip("删除失败,原因：" + resp.data.msg, "error");
            }
          });
        })
        .catch(() => {
          messageTip("取消删除", "warning");
        });
    }
    function batchDel() {
      if (cluedIdArray.value.length < 0) {
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      messageConfirm("你确定要删除?")
        .then(() => {
          let ids = cluedIdArray.value.join(",");
          doDelete("/api/clues", { ids: ids }).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("批量删除成功", "success");
              props.reload();
            } else {
              console.log(resp.data);
              messageTip("批量删除失败,原因：" + resp.data.msg, "error");
            }
          });
        })
        .catch(() => {
          messageTip("取消批量删除", "warning");
        });
    }
    return {
      batchDel,
      del,
      view,
      edit,
      addClue,
      submitUpload,
      uploadFile,
      importExcel,
      importExcelDialogVisible,
      toPage,
      total,
      pageSize,
      clueList,
      handleSelectionChange,
    };
  },
};
</script>
<style scoped>
.el-table {
  margin-top: 15px;
}
.fileTip {
  margin-top: 10px;
}
</style>